<template>
  <div class="about-container">
    <el-card class="about-card">
      <div class="about-header">
        <h1>关于我们</h1>
        <div class="divider"></div>
      </div>

      <div class="about-content">
        <div class="section company-intro">
          <h2>公司简介</h2>
          <p>我们是一家专注于提供优质商品和服务的电商平台，致力于为用户打造便捷、安全、愉悦的购物体验。成立至今，我们始终秉持"诚信经营、用户至上"的理念，不断创新和完善我们的服务。</p>
        </div>

        <div class="section our-service">
          <h2>我们的服务</h2>
          <div class="service-grid">
            <div class="service-item">
              <i class="el-icon-shopping-cart-full"></i>
              <h3>品质保证</h3>
              <p>严选优质商品，确保产品品质</p>
            </div>
            <div class="service-item">
              <i class="el-icon-service"></i>
              <h3>优质服务</h3>
              <p>24小时客服支持，解答您的疑问</p>
            </div>
            <div class="service-item">
              <i class="el-icon-truck"></i>
              <h3>快速配送</h3>
              <p>专业物流配送，确保准时送达</p>
            </div>
            <div class="service-item">
              <i class="el-icon-medal"></i>
              <h3>售后无忧</h3>
              <p>7天无理由退换，让您购物无忧</p>
            </div>
          </div>
        </div>

        <div class="section contact-us">
          <h2>联系我们</h2>
          <div class="contact-info">
            <p><i class="el-icon-location-outline"></i> 地址：xxxxxxxxxxx</p>
            <p><i class="el-icon-phone"></i> 电话：xxxxxxxxx</p>
            <p><i class="el-icon-message"></i> 邮箱：xxxxxxxxxxxxxxx</p>
            <p><i class="el-icon-time"></i> 工作时间：周一至周日 9:00-21:00</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>
.about-container {
  max-width: 1225px;
  margin: 0 auto;
  padding: 20px;
}

.about-card {
  margin-bottom: 20px;
}

.about-header {
  text-align: center;
  margin-bottom: 40px;
}

.about-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

.divider {
  width: 60px;
  height: 3px;
  background-color: #ff6700;
  margin: 0 auto;
}

.section {
  margin-bottom: 40px;
}

.section h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 15px;
}

.section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #ff6700;
}

.company-intro p {
  line-height: 1.8;
  color: #666;
  text-indent: 2em;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.service-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.service-item i {
  font-size: 40px;
  color: #ff6700;
  margin-bottom: 15px;
}

.service-item h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.service-item p {
  color: #666;
  font-size: 14px;
}

.contact-info {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.contact-info p {
  margin: 15px 0;
  color: #666;
}

.contact-info i {
  color: #ff6700;
  margin-right: 10px;
  font-size: 18px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-container {
    padding: 10px;
  }
  
  .section h2 {
    font-size: 20px;
  }
}

@media screen and (max-width: 480px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  
  .about-header h1 {
    font-size: 24px;
  }
}
</style> 